<template>
	<div>
		<div class="content">
			<transition>
				<div class="block animated" :style="{top:this.positionY,left:this.positionX,gridArea:'main2'}" @mousedown="move"
					ref="block" @click="showStart = true">
				</div>
			</transition>
		</div>

	</div>
</template>

<script>
export default {
  //  智能助手
  data() {
    return {
      positionX: 0,
      positionY: 0,
      showStart: true,
    }
  },
  mounted() {},
  methods: {
    move(e) {
      const odiv = e.target // 获取目标元素

      // 算出鼠标相对元素的位置
      const disX = e.clientX - odiv.offsetLeft
      const disY = e.clientY - odiv.offsetTop
      document.onmousemove = e => {

        /*
         * 鼠标按下并移动的事件
         * 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
         */
        const left = e.clientX - disX
        const top = e.clientY - disY

        // 绑定元素位置到positionX和positionY上面
        this.positionX = top
        this.positionY = left

        // 移动当前元素
        odiv.style.left = `${left}px`
        odiv.style.top = `${top}px`
      }
      document.onmouseup = e => {
        document.onmousemove = null
        document.onmouseup = null
      }
    },
  },
}
</script>

<style scoped lang="less">
.content {
	position: relative;
	right: 0;
	bottom: 0;
	display: grid;
	width: 300px;
	height: 300px;
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 100px 100px;
	grid-template-areas: 'head1 head2 head3' 'main1 main2 main3' 'footer1 footer2 footer3';
	/*grid-template-areas: none;*/
	border: 1px solid #000;
	margin: 50px auto;
}

.block {
	position: absolute;
	width: 100px;
	height: 100px;
	display: flex;
	justify-content: center;
	justify-items: center;
	align-items: center;
	align-content: center;
	user-select: none;
	border: 1px solid #000;
	background-image: url('~@/assets/imgs/archive.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 88888;
	cursor: pointer;
}
.start {
	padding: 0px 15px 0 0;
	background-image: url('~@/assets/imgs/juxing_r.png');
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
</style>
